<template>
	<view class="container">
		<TopNav title="收益明细" theme="white"></TopNav>
		<view class="main">
			<view class="bg-white radius p-tb20">
				<view class="flex justify-evenly align-center">
					<view class="flex flex-direction justify-center">
						<text class="text-bold f-s28 line-height36 text-center">{{detailData.all_order_brokerage || 0}}</text>
						<text class="text-gray f-s12 m-t11 f-w400 line-height16">累计收入(元)</text>
					</view>
					<view class="card-line"></view>
					<view class="flex flex-direction justify-center">
						<text class="text-bold f-s28 line-height36 text-center">{{detailData.withdraw_money || 0}}</text>
						<text class="text-gray f-s12 m-t11 f-w400 line-height16">累计提现(元)</text>
					</view>
				</view>
			</view>
			<view class="m-t22">
				<view class="flex justify-between align-center">
					<text class="f-w600 f-s15 line-height21">收益明细</text>
					<YearMonthPicker v-model="queryParams.time"></YearMonthPicker>
				</view>
				<view class="height-16"></view>
			</view>
			<view class="flex-1 overflow-hidden m-t12">
				<scroll-view class="full-height" scroll-y="true" @scrolltolower="handleScrollBottom">
					<view class="radius bg-white p-12 m-b10" v-for="item in list" :key="item.id">
						<view class="flex align-center justify-between">
							<text class="f-s15 f-w600 line-height21">时长积分</text>
							<text class="text-bold f-s16 text-theme line-height21">¥25.80</text>
						</view>
						<view class="m-t8 text-gray f-s12 line-height17">
							<text>2024-12-01 19:00</text>
						</view>
						<view class="p-8 radius-4 m-t8" style="background-color: #F5F6F7;">
							<view class="flex">
								<view class="basis-lg f-s12 line-height16 f-w400 ">
									<text class="text-gray p-r10">推广用户</text>
									<text class="">钱多多</text>
								</view>
								<view class="basis-sm f-s12 line-height16 f-w400 flex overflow-hidden">
									<text class="text-gray p-r10 shrink-0">服务项目</text>
									<text class="text-cut ">钱多多钱多多钱多多</text>
								</view>
							</view>
							<view class="flex m-t14">
								<view class="basis-lg f-s12 line-height16 f-w400 ">
									<text class="text-gray p-r10">服务时间</text>
									<text class="">2024-12-01 19:00</text>
								</view>
								<view class="f-s12 line-height16 f-w400 ">
									<text class="text-gray p-r10">服务项目</text>
									<text class="text-cut">500元/人</text>
								</view>
							</view>
						</view>
					</view>
					<view class="padding-tb-xs" v-if="total !== 0">
						<u-loadmore :status="loadmoreStatus" line @loadmore="handleScrollBottom" />
					</view>
					<Empty :show="total === 0" top="20rpx"></Empty>
				</scroll-view>
			</view>
		</view>
	</view>
</template>

<script>
	import dayjs from 'dayjs'
	import YearMonthPicker from '@/components/picker-year-month/index.vue'
	import Empty from '@/components/empty/index.vue'
	import mixins from "@/mixins"
	import {
		rewardList,
		rewardStatistics
	} from '@/api/reward'
	export default {
		name: "",
		mixins: [mixins],
		components: {
			YearMonthPicker,
			Empty
		},
		data() {
			return {

				detailData: {},
				list: [],
				queryParams: {
					time: dayjs().format("YYYY-M"),
					limit: 10,
					page: 1
				},
			}
		},
		onLoad() {
			this.getData()
		},
		methods: {
			getData() {
				this.getDetail()
				this.getList()
			},
			getDetail() {
				rewardStatistics().then(res => {
					let {
						data
					} = res
					this.detailData = data
				})
			},
			getList() {
				rewardList(this.queryParams).then(res => {
					let {
						data: {
							list,
							count,
							total
						}
					} = res
					this.total = count || 0
					this.pageTotal = total || 0
					if (this.queryParams.page === this.pageTotal) this.loadmoreStatus = 'nomore'
					if (this.queryParams.page === 1) {
						this.list = list
					} else if (this.queryParams.page < this.pageTotal) {
						this.list = this.list.concat(list)
					}
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	@import '@/common/css/var.scss';

	.container {
		background: url('/static/images/reward/top-1.png') no-repeat fixed top center / 100% auto;

		.main {
			padding: 24rpx;
			padding-top: 36rpx;
			@include fixed-height;
			overflow: hidden;
			display: flex;
			flex-direction: column;

			.card-line {
				width: 1rpx;
				height: 72rpx;
				background-color: #DDE0E6;
			}

		}
	}
</style>